import React, { useState, useEffect, useRef } from 'react';
import { Modal, Table, Form, Input, Pagination } from 'antd';
import { Resizable } from 'react-resizable'; //拖拽第三方库
import { CloseOutlined, InfoOutlined } from '@ant-design/icons';
import './style.css';
export default function index() {
  // 拖拽
  const [dcolumns, setDcolumns] = useState([]);
  const [components, setComponents] = useState({});
  // 控制添加弹出框显示与否
  const [addModal, setAddModal] = useState(false);
  // 控制修改弹出框显示与否
  const [editModal, setEditModal] = useState(false);
  // 存放将要修改的数据
  const [willEditData, setWillEditData] = useState();
  // 控制修改提示框
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 提示框的提示信息
  const [tips, setTips] = useState('请选择要修改的数据');
  // 分页
  const [pagination, setPagination] = useState({
    page: 1,
    pagesize: 10,
  });
  // 数据
  const [list, setList] = useState([]);
  // 添加form表单的ref
  const addFormRef = useRef();
  // 添加弹出框
  const showModal = () => {
    setAddModal(true);
  };
  // 点击左上角x号的回调
  const handleCancel = () => {
    setAddModal(false);
    setEditModal(false);
    setIsModalOpen(false);
  };
  // 列
  const column = [
    {
      title: '序号',
      dataIndex: 'key',
      width: 100,
      ellipsis: true,
    },
    {
      title: '地区编号',
      dataIndex: 'city_id',
      width: 100,
      ellipsis: true,
    },
    {
      title: '地区名称',
      dataIndex: 'city',
      width: 100,
      ellipsis: true,
    },
    {
      title: '上级地区',
      dataIndex: 'par_city',
      width: 100,
      ellipsis: true,
    },
    {
      title: '',
      dataIndex: '',
    },
  ];
  // 数据
  const data = [];
  for (let i = 0; i < 100; i++) {
    data.push({
      key: i + 1,
      city_id: `123 ${i}`,
      city: '中国',
      par_city: `中国`,
    });
  }
  useEffect(() => {
    setList(data);
    setDcolumns(column),
      setComponents({
        header: {
          cell: ResizeableTitle,
        },
      });
  }, []);
  // 多选框回调
  const a = (selectedRowKeys, selectedRows) => {
    console.log(selectedRowKeys);
    let item = selectedRows[0];
    setWillEditData(item);
  };
  const rowSelection = {
    onChange: a,
  };
  // 拖拽
  const ResizeableTitle = (props) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index) =>
    (e, { size }) => {
      // console.log('size', size);

      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setDcolumns(nextColumns);
    };
  const columns = dcolumns.map((col, index) => ({
    ...col,
    onHeaderCell: (column) => ({
      width: col.width * 1 || 100,
      onResize: handleResize(index),
    }),
  }));

  // 添加的form表单验证
  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  // 保存回调
  const preservation = () => {
    addFormRef.current.submit();
  };
  // 修改
  const editData = () => {
    if (!willEditData) {
      return setIsModalOpen(true);
    }
    setEditModal(true);
  };
  // 删除
  const delData = () => {
    if (!willEditData) {
      setTips('请选择要删除的数据?');
      setIsModalOpen(true);
      return;
    }
    setTips('确定要删除这条数据吗?');
    setIsModalOpen(true);
  };
  // 分页回调
  const paginationChange = (page, pageSize) => {
    const newData = data.slice(page - 1, pageSize);
    setList(newData);
  };
  return (
    <div className="system_management">
      {/* 头部 */}
      <div className="system_management_top">
        <button onClick={showModal}>新增</button>
        <button onClick={editData}>修改</button>
        <button onClick={delData}>删除</button>
        <button>过滤</button>
        <button onClick={() => useEffect}>还原</button>
        <button>打印</button>
        <button>导入</button>
        <button>导出</button>
        <button>查看日志</button>
      </div>
      {/* 主体 */}
      <div className="system_body">
        <div className="system_body_title">
          <span>全国省市</span>
        </div>
        <div className="system_body_table">
          <Table
            components={components}
            pagination={false}
            bordered
            rowSelection={{
              ...rowSelection,
            }}
            scroll={{
              y: '380px',
            }}
            columns={columns}
            dataSource={list}
          />
          <Pagination
            total={85}
            defaultPageSize={pagination.pagesize}
            defaultCurrent={1}
            onChange={paginationChange}
          />
          {/* 添加对话框 */}
          <Modal
            footer={false}
            title="全国省市"
            open={addModal}
            onCancel={handleCancel}
          >
            <div className="addModalTop system_management_top">
              <button onClick={preservation}>保存</button>
              <button>保存且更新</button>
              <button>草稿箱</button>
            </div>
            <div className="addModalForm">
              <div className="addModalForm_title system_body_title">
                <span>全国省市</span>
              </div>
              <Form
                ref={addFormRef}
                name="basic"
                labelCol={{
                  span: 6,
                }}
                wrapperCol={{
                  span: 16,
                }}
                initialValues={{
                  remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item
                  label="上级地区"
                  name="par_city"
                  rules={[
                    {
                      message: '不能为空!',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>

                <Form.Item
                  label="地区编号"
                  name="city_id"
                  rules={[
                    {
                      required: true,
                      message: '不能为空!',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  label="地区名称"
                  name="city"
                  rules={[
                    {
                      required: true,
                      message: '不能为空!',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
              </Form>
            </div>
          </Modal>

          {/* 修改对话框 */}
          <Modal
            destroyOnClose
            footer={false}
            title="全国省市"
            open={editModal}
            onCancel={handleCancel}
          >
            <div className="addModalTop system_management_top">
              <button onClick={preservation}>保存</button>
              <button>保存且更新</button>
              <button>草稿箱</button>
              <button>删除</button>
              <button>查看日志</button>
            </div>
            <div className="addModalForm">
              <div className="addModalForm_title system_body_title">
                <span>全国省市</span>
              </div>
              <Form
                ref={addFormRef}
                name="basic"
                labelCol={{
                  span: 6,
                }}
                wrapperCol={{
                  span: 16,
                }}
                initialValues={willEditData}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item
                  label="上级地区"
                  name="par_city"
                  rules={[
                    {
                      message: '不能为空!',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>

                <Form.Item
                  label="地区编号"
                  name="city_id"
                  rules={[
                    {
                      required: true,
                      message: '不能为空!',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  label="地区名称"
                  name="city"
                  rules={[
                    {
                      required: true,
                      message: '不能为空!',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
              </Form>
            </div>
          </Modal>
        </div>
      </div>

      {/* 修改提示对话框 */}
      <div
        className="logininfo editModal"
        style={{ display: isModalOpen ? '' : 'none' }}
      >
        <div className="logininfotop">
          <p>提示对话框</p>
          <span className="logininfotopcha" onClick={handleCancel}>
            <CloseOutlined />
          </span>
        </div>
        <div className="logininfocenter">
          <span className="logininfocentertu">
            <InfoOutlined style={{ color: 'white' }} />
          </span>
          <p>{tips}</p>
        </div>
        <div className="logininfobottom tipsbottom">
          <button onClick={handleCancel}>确定</button>
        </div>
      </div>
      {/* 遮罩层 */}
      <div
        className="cover"
        style={{ display: isModalOpen ? '' : 'none' }}
      ></div>
    </div>
  );
}
